import React, { forwardRef } from 'react';
import './index.scss';

export interface DensityDisplayItem {
  label: string;
  value: number;
  icon: string;
}

export interface DensityDisplayProps {
  /**
   * 模块数量
   */
  moduleCount?: number;

  /**
   * 图标宽度
   */
  iconWidth?: number;
  /**
   * 图标高度
   */
  iconHeight?: number;

  /**
   * 内边距
   */
  padding?: number;

  /**
   * 数据键值
   */
  dataItems?: DensityDisplayItem[];

  /**
   * 图标类型
   */
  iconType?: 'passenger-hall' | 'waiting-area' | 'taxi' | 'ride-hailing' | 'private-car' | 'shuttle-bus' | 'custom';

  /**
   * 图标颜色
   */
  iconColors?: string[];

  /**
   * 数值显示
   */
  showValues?: boolean;

  /**
   * 字体大小
   */
  fontSize?: number;

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const DensityDisplay = forwardRef<HTMLDivElement, DensityDisplayProps>(({
  moduleCount = 6,
  iconWidth = 48,
  iconHeight = 48,
  padding = 20,
  dataItems = [
    { label: '客运大厅', value: 870110, icon: 'http://localhost:8085/static/images/客运大厅.png' },
    { label: '候车区', value: 870110, icon: 'http://localhost:8085/static/images/候车区.png' },
    { label: '出租车', value: 870110, icon: 'http://localhost:8085/static/images/出租车.png' },
    { label: '网约车', value: 870110, icon: 'http://localhost:8085/static/images/网约车.png' },
    { label: '私人汽车', value: 870110, icon: 'http://localhost:8085/static/images/私人汽车.png' },
    { label: '专线车', value: 870110, icon: 'http://localhost:8085/static/images/专线车.png' }
  ],
  iconType = 'passenger-hall',
  iconColors = ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
  showValues = true,
  fontSize = 14,
  onClick,
  style = {},
  className = '',
  __designMode,
  componentId,
  _componentName,
  ...otherProps
}, ref) => {
  // 根据moduleCount截取数据
  const displayItems = dataItems.slice(0, moduleCount);

  // 计算行数：每行2个模块
  const rowCount = Math.ceil(moduleCount / 2);
  
  const containerStyle: React.CSSProperties = {
    fontSize: `${fontSize}px`,
    gridTemplateRows: `repeat(${rowCount}, 1fr)`, // 动态设置行数
    padding: `${padding}px`,
    ...style
  } as React.CSSProperties;

  return (
    <div
      ref={ref}
      className={`hzdz-density-display ${className}`.trim()}
      style={containerStyle}
      onClick={onClick}
      {...otherProps}
    >
      {displayItems.map((item, index) => (
        <div key={index} className="hzdz-density-display__module">
          <div className="hzdz-density-display__icon-container">
            <img
              className="hzdz-density-display__icon"
              style={{
                width: `${iconWidth}px`,
                height: `${iconHeight}px`
              }}
              src={item.icon}
              alt={item.label}
            />
          </div>
          <div className="hzdz-density-display__content">
            <div className="hzdz-density-display__label">
              {item.label}
            </div>
            
            {showValues && (
              <div className="hzdz-density-display__value-container">
                <span 
                  className="hzdz-density-display__value"
                  style={{
                    color: iconColors[index % iconColors.length]
                  }}
                >
                  {item.value.toLocaleString()}
                </span>
                <span className="hzdz-density-display__unit">人</span>
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
});

export default DensityDisplay;
